<script setup>
import { computed, ref, watch } from "vue";
import Login from "./Login.vue";
import Register from "./Register.vue";
import RegisterSuccess from "./RegisterSuccess.vue";

import { useLoginModalStore } from "@/stores/loginModalStore";
import { storeToRefs } from "pinia";

// 登录模态框贡献数据对象
const loginModalStore = useLoginModalStore();

// 是否显示登录窗口
const { showLoginModal: showWindow } = storeToRefs(loginModalStore);

// 1：登录页面，2：注册界面，3：注册成功界面
const windowValue = ref(1);

// 登录注册对话框中的显示的组件（登录组件？注册组件？注册成功组件？）
const showWindowComponent = computed(() => {
    switch (windowValue.value) {
        case 1:
            return Login;
        case 2:
            return Register;
        default:
            return RegisterSuccess;
    }
});

// 改变窗口
const changeWindow = (value) => {
    windowValue.value = value;
};

// 是否显示登录模态框（函数）
const isShowModal = (show) => {
    showWindow.value = show;
};

// 将 是否显示登录模态框（函数）暴露出去
defineExpose({ isShowModal });
</script>

<template>
    <n-modal
        v-model:show="showWindow"
        style="width: 420px;"
    >
        <!-- Transition：保证只有一个根组件 -->
        <!-- mode="out-in" 先执行离开的动画，在执行进来的动画 -->
        <Transition
            name="bounce"
            mode="out-in"
        >
            <component
                :is="showWindowComponent"
                @change-window="changeWindow"
            />
        </Transition>
    </n-modal>
</template>

<style>
.bounce-enter-active {
    animation: bounce-in 0.5s;
}
.bounce-leave-active {
    animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}
</style>